<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue watch监听 入门</title>
</head>
<style>
    .template {
        margin: 5% 10%;
    }
</style>
<body>
<div id="app">
    <div class="template">
        <input type="number" v-model="number"> {{number}}
        <input type="number" v-model="number2"> {{number2}}
        <input type="number" v-model="number3"> {{number3}}
    </div>

</div>
<script src="../js/vue.js"></script>
<script>
    const demo = new Vue({
        el: '#app',
        data: {
            number : 0,
            number2 : 10,
            number3 : 100,
        },
        methods: {
            number2Add(val, oldVal){
                return val + oldVal;
            }
        },
        computed:{
            number3Add(){
                return this.number3
            }
        },
        watch: {
            number: function (val, oldVal){
                console.log(val);
                console.log(oldVal);
            },
            number2: 'number2Add',
            number3: 'number3Add',
        }
    });
</script>
</body>
</html>